<template>
	<view class="pages">
		<view class="container">
			<com-head textTit="使用次数" :typeVal="1" :scrollTop="scrollTop"></com-head>
			
			<view class="popMain">
				<view class="popMain__view" v-for="(item,index) in projectData">
					<view class="header">
						<view class="name">项目购买</view>
						<view class="btn">余{{item.remain_num}}次待使用</view>
					</view>
					
					<view class="box">
						<view class="box_left"><image :src="item.project_images"></image></view>
						<view class="box_right">
							<view class="box_right-name">{{item.project_name}}</view>
							<view class="box_right-num">套餐次数：{{item.use_num}}次</view>
							<view class="box_right-shop">购买门店：{{item.orders.store.title}}</view>
							<view class="box_right-dec">
								<view class="box_right-dec-left"><text>￥</text>{{item.sale_price}}</view>
								<view class="box_right-dec-right">× {{item.number}}</view>
							</view>
						</view>
					</view>
					
					<view class="dec">
						<view class="dec__view">
							<text>使用次数：</text><text class="dec__view-num">{{(item.use_num - item.remain_num) > 0 ? (item.use_num - item.remain_num) : 0}}次</text>
						</view>
						<view class="dec__view">
							<text>使用时间：</text><text class="dec__view-num">{{item.re_date}}   {{item.re_time}}</text>
						</view>
						<view class="appointment" v-if="item.is_re == 1" @click="subscribeFun(item, 1)">预约</view>
						<view class="appointment" v-if="item.is_re == 0" @click="subscribeFun(item, 0)">查看预约</view>
					</view>
					
				</view>
				
				<view class="empty" style="text-align: center; margin-top: 146rpx;" v-if="!projectData.length">
					<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/tijiao2.png" style="width: 256rpx;height: 176rpx;"></image>
					<view style="font-size: 24rpx;color: #AFB5BF; padding: 70rpx 0 80rpx 0;">暂无数据</view>
				</view>
							
				
				<u-loadmore margin-top="60" margin-bottom="30" :status="status" />
				
			</view>
			
			<!-- 时间弹窗 -->
			<u-popup v-model="popShow" height="1000rpx" z-index="99" safe-area-inset-bottom mode="bottom" closeable="false" border-radius="40" @close="close">
				<view class="timerWrap">
					
					<view class="timerWrap-time">选择时间</view>
					<view class="dateList">
						<view class="list" v-for="(ele,index) in dateList" :key="index"
						@click="chioseDay(ele,index)">
						<view class="date" :class="dayActive == index ? 'dayActive' : ''">{{index == 0 ? '今天' : ele.week}}</view>
							<view class="dateTitle":class="dayActive == index ? 'dayActive' : ''">{{ele.date}}</view>
							<view class="borders" v-if="dayActive == index">  </view>
						</view>
					</view>
					<view class="chioseTimeList">
						<!-- ele.num == 0 ? 'full' : ''   || -->
						<!-- beBookedUp  订满 -->
						<view class="list" :class="ele.isCheck ? 'active' : ele.num == 0 ? 'full' : ''"
						@click="chioseTime(ele,index)"
						v-for="(ele,index) in list" :key="index">
							<view class="tit">{{ele.time}}</view>
							<view class="price">{{ele.price}}</view>
							<view class="status " v-if="ele.num == 0">已定满</view>
							<view class="status" v-if="ele.isCheck && ele.num != 0">已选中</view>
							<view class="status" v-if="!ele.isCheck && ele.num != 0">可预约</view>
						</view>
					</view>
				</view>
			</u-popup>
			<!-- <view @click="subscribeShow = true">subscribeShowsubscribeShowsubscribeShow</view> -->
			<!-- 预约弹窗 -->
			<u-popup v-model="subscribeShow" z-index="5" safe-area-inset-bottom mode="bottom" closeable="false" border-radius="40" @close="subscribeClose">
				<view class="subscribePls">
					{{subscribeType == 1 ? '预约' : '查看预约'}}
				</view>
				
				<view class="subscribe">
					<view class="plsTitle"><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>预约时间</view>
					<view class="reserveWrap">
						<view class="common btB" @click="openF" >
							<view class="left">
								<view class="tit">预约时间</view>
								<view class="tic">
									{{times}}
								</view>
							</view>
							<u-icon name="arrow-right" color="#000" size="28" v-if="subscribeType == 1"></u-icon>
						</view>
					</view>
					
					<view class="plsTitle"><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>预约技师</view>
					<view class="technicianWrap">
						<view class="groupList" @click="selectPersonal()">
							<view class="list" v-if="makeTech.length" v-for="(ele,index) in makeTech" :key="index" >
								<text>预约技师</text>
								<text>
									<text>{{ele.name}}（{{ele.number}}）</text>
									<u-icon name="arrow-right" color="#000" size="28" v-if="subscribeType == 1"></u-icon>
								</text>
							</view>
							<view class="list" v-if="!makeTech.length">
								<text>预约技师</text>
								<u-icon name="arrow-right" color="#000" size="28" v-if="subscribeType == 1"></u-icon>
							</view>
						</view>
					</view>
					
					<view class="subscribeFooter" @click="submitFun" v-if="subscribeType == 1">
						<view class="sub">确定</view>
					</view>
					
				</view>
			</u-popup>
			
			
		</view>
	</view>
</template>

<script>
	var util= require("@/common/utils.js")
	export default {
		data() {
			return {
				total:0,
				page:1,
				projectData: [],
				scrollTop: 0,
				popShow: false,
				subscribeShow: false,
				dayActive:0,
				stores_id: '',
				date: '',
				nodeTime:'',
				list: [],
				dateList: [],
				times: '',
				itemObj: {},
				subscribeType: ''
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		onLoad() {
			// 时间
			let time = util.formatDate(new Date());
			let date=util.getDates(4, time);
			date.forEach((ele)=>{
				let time = ele.time.split('-')
				ele.date = time[1] +'-'+ time[2]
			})
			this.dateList = date
			this.stores_id = this.store_id
			this.date = this.dateList[0].time
			this.$u.vuex("makeDays",this.date)
			this.getTimeNode(0)
			let nodeTime = this.time(new Date(),1).split(":")
			this.nodeTime = nodeTime[0]*1*60 + nodeTime[1]*1
			
			
			this.projectUseNum()
		},
		// 分页加载
		onReachBottom() {
			if (this.total > this.projectData.length) {
				this.page++;
				this.projectUseNum();
			}
		},
		onHide() {
			
		},
		methods: {
			async submitFun() {
				let ids = this.makeTech ? this.makeTech.map(item => item.id) : []
				if (!this.makeTime) return this.utlis.Toast("请选择预约时间")
				if (ids.length < 1) return this.utlis.Toast("请选择预约技师")
				
				let {code,data} = await this.$u.api.reservation({
					orders_project_id: this.itemObj.id,
					staff_id: ids.join(),
					re_date:this.makeDays,
					re_time:this.makeTime,
				});
				if(code){
					this.utlis.Toast("预约成功")
					this.subscribeShow = false
					
					this.projectData = []
					this.page = 1
					
					this.subscribeClose()
					this.projectUseNum();
				}
			},
			subscribeFun(item, type){
				// 显示加载中
				uni.showLoading({
				  title: '加载中...',
				  mask: true // 是否显示透明蒙层，防止触摸穿透
				});
				
				this.itemObj = item
				this.$u.vuex("makeNum", item.orders.user_num)
				this.subscribeShow = true
				this.subscribeType = type
				uni.hideLoading();
				if (type == 0) {
					this.times = item.staff.re_date + '   ' + item.staff.re_time
					item.staff.name = item.staff.staff_name
					let data = JSON.parse(JSON.stringify(item.staff))
					console.log(777,[data])
					this.$u.vuex("makeTech", [data])
					uni.hideLoading();
				}
			},
			openF(){
				if (this.subscribeType == 0) return
				this.popShow = true
			},
			subscribeClose() {
				this.times = []
				this.dayActive = 0
				this.date = ''
				this.$u.vuex("makeTech", '')
				this.list.forEach((ele,currIndex)=>{
					ele.isCheck = false
				})
				
				// this.$u.vuex("makeNum", '')
				// this.$u.vuex("makeDays", '')
				// this.$u.vuex("makeTime", '')
				
				this.subscribeShow = false
			},
			close() {
				this.popShow = false
			},
			selectPersonal(){
				if (this.subscribeType == 0) return
				if(!this.times){
					this.utlis.Toast("请选择预约的时间点")
					return
				}
				this.utlis.goUrl(`/pages/mine/selectPersonal`)
			},
			async getTimeNode(index){
				this.list = []
				let {data,code} = await this.$u.api.getTimeNode({store_id:this.makeStore_id,date:this.date});
				let arr = []
				data.forEach((ele)=>{
					ele.isCheck = false
					if(index == 0){
						let nodeTime = ele.time.split(":")
						ele.nodeTime = nodeTime[0]*1*60 + nodeTime[1]*1
						if(ele.nodeTime >this.nodeTime){
							arr.push(ele)
						}
					}else{
						arr.push(ele)
					}
				})
				// if(arr.length >= 16){
				// 	this.list = arr.slice(0,16)
				// }else{
					this.list = arr
				// }
				console.log(arr,"88888888888")
				console.log(this.list,"订单")
			},
			// 选择日期
			chioseDay(ele,index){
				this.dayActive = index
				this.date = ele.time
				console.log(45111, this.date)
				this.$u.vuex("makeDays",this.date)
				this.getTimeNode(index)
				
			},
			time(date,type) {
				var y = date.getFullYear()
				var m = date.getMonth() + 1
				m = m < 10 ? '0' + m : m
				var d = date.getDate()
				d = d < 10 ? '0' + d : d
				var h = date.getHours()
				h = h < 10 ? '0' + h : h
				var minute = date.getMinutes()
				minute = minute < 10 ? '0' + minute : minute
				var second = date.getSeconds()
				second = second < 10 ? '0' + second : second
				if(type){
					return h + ':' + minute
				}else{
					return y + '-' + m + '-' + d
				}
			},
			chioseTime(ele,index){
				if (ele.num == 0) return
				this.list.forEach((ele,currIndex)=>{
					if(index != currIndex){
						ele.isCheck = false
					}
				})
				ele.isCheck = !ele.isCheck
				if(ele.isCheck){
					this.times = ele.time
					this.$u.vuex("makeTime",ele.time)
				}else{
					this.times = ""
					this.$u.vuex("makeTime",'')
				}
				
				this.popShow = false
			},
			async projectUseNum(){
				let {code,data} = await this.$u.api.projectUseNum({
					page:this.page,
				});
				if(code){
					if(this.page == 1 && !data.data.lenght){
						this.status = 'nomore';
					}
					
					this.total = data.total;
					this.projectData = [...this.projectData, ...data.data];
					if (this.total <= this.list.length) this.status = 'nomore';
					else this.status = 'loading';
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.pages{
	width: 100%;
	height: 100%;
	background-image: url('https://jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg.png') !important;
	background-repeat: no-repeat;
	background-size: cover;
	.container{
		overflow-y: scroll;
		height: 100%;
		padding: 50rpx 32rpx;
	}
}

.appointment{
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 10rpx 25rpx;
	background: linear-gradient( 98deg, #50DCC2 0%, #007664 100%);
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	font-size: 26rpx;
	color: #FFFFFF;
	text-align: center;
}
.popMain{
	margin-top: 20rpx;
	&__view{
		padding: 32rpx;
		background: white;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
		.header{
			display: flex;
			padding-bottom: 32rpx;
			border-bottom: 2rpx dashed #EDEDED;
			.name{
				flex: 1;
				font-size: 32rpx;
				color: #333333;
			}
			.btn{
				width: 190rpx;
				// padding: 6rpx 17rpx;
				// background: linear-gradient( 98deg, #50DCC2 0%, #007664 100%);
				// border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 26rpx;
				color: #007664;
				text-align: center;
			}
		}
	}

	.box{
		display: flex;
		padding: 32rpx 0;
		border-bottom: 2rpx dashed #EDEDED;
		&_left{
			image{
				width: 172rpx;
				height: 172rpx;
				background: #D9D9D9;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}
		&_right{
			margin-left: 18rpx;
			flex: 1;
			&-name{
				font-size: 28rpx;
				color: #333333;
				// font-weight: bold;
			}
			&-num, &-shop{
				font-size: 24rpx;
				color: #999999;
				margin-top: 11rpx;
			}
			&-dec{
				display: flex;
				margin-top: 18rpx;
				// font-weight: bold;
				&-left{
					font-size: 32rpx;
					color: #007664;
					flex: 1;
					text{
						font-size: 24rpx;
					}
				}
				&-right{
					font-weight: 400;
					font-size: 32rpx;
					color: #999999;
				}
			}
		}
	}
	
	.dec{
		margin-top: 30rpx;
		position: relative;
		&__view{
			font-size: 24rpx;
			color: #999999;
			margin-top: 14rpx;
			&-num{
				font-size: 24rpx;
				color: #4D5562;
			}
		}
	}
}
.subscribeFooter{
	margin: 40rpx 0 100rpx 0;
	.sub{
		padding: 25rpx 25rpx;
		background: linear-gradient( 98deg, #50DCC2 0%, #007664 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
	}
}
.subscribePls{
	margin: 60rpx 30rpx;
	font-size: 30rpx;
	font-weight: bold;
}
.subscribe{
	padding: 0 30rpx;
	margin-bottom: 100rpx;
}

.timerWrap{
	background: #ffffff;
	// border-radius: 8rpx;
	padding: 50rpx 42rpx 0 38rpx;
	// min-height: 900rpx;
	// max-height: 1300rpx;
	// overflow-y: auto;
	z-index: 99999;
	// border: 1rpx solid red;
	&-time{
		font-size: 32rpx;
		color: #393C42;
	}
	.dateList{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0 40rpx 0;
		.list{
			width: 120rpx;
			text-align: center;
			font-size: 24rpx;
			.dateTitle{
				color: #999999;
				margin-bottom: 16rpx;
			}
			.date{
				color: #999999;
			}
			.borders{
				width: 50rpx;
				padding: 0 30rpx;
				border-bottom: 4rpx solid #007664;
				margin: 0 auto;
			}
		}
	}
}
.chioseTimeList{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.list{
		width: 120rpx;
		border-radius: 4px;
		margin-right: 42rpx;
		text-align: center;
		background: #FFF7E8;
		margin-bottom: 42rpx;
		padding-top: 23rpx;
		.tit{
			color: #B99940;
			font-size: 30rpx;
		}
		.price{
			color: #B99940;
			opacity: 0.7;
			font-size: 24rpx;
			margin: 8rpx 0 12rpx 0;
		}
		.status{
			width: 120rpx;
			line-height: 35rpx;
			background: linear-gradient(135deg, #E5C372 0%, #F0E2A0);
			border-radius: 4rpx;
			color: #FFFFFF;
			font-size: 24rpx;
		}
	}
	.active{
		background-color: #D7FFF8;
		.tit{
			color: #007664;
		}
		.price{
			color: #007664;
		}
		.status{
			background: linear-gradient(140deg, #50DCC2 0%, #007664);
		}
	}
	// 订满
	.beBookedUp{
		background-color: #F4F4F4;
		.tit{
			color: #999999;
		}
		.price{
			color: #999999;
		}
		.status{
			background: #E2E2E2;
		}
	}
	.full{
		background-color: #F4F4F4;
		.tit{
			color: #999999;
		}
		.price{
			color: #999999;
		}
		.status{
			background: #E2E2E2;
		}
	}
	.list:nth-child(4n+4){
		margin-right: 0;
	}
}

.plsTitle{
	font-size: 28rpx;
	color: #242833;
	line-height: 26rpx;
	margin-bottom: 32rpx;
	margin-top: 32rpx;
	font-weight: bold;
	image{
		width: 9rpx;
		height: 29rpx;
		position: relative;
		top: 5rpx;
		margin-right: 12rpx;
	}
}
.reserveWrap{
	background-color: #FFFFFF;
	border-radius: 8rpx;
	padding: 0 32rpx 0 32rpx;
	.reserveNumber{
		padding: 20rpx 0 40rpx 0;
		// border-bottom: 1rpx solid rgba(142,142,142,.24);
		// border-top: 1rpx solid rgba(142,142,142,.24);
		.tag{
			color: #D1B97E;
			margin-bottom: 25rpx;
			font-size: 26rpx;
		}
		.tit{
			font-size: 26rpx;
			color: #333333;
			line-height: 26rpx;
			margin-bottom: 35rpx;
		}
		.numList{
			display: flex;
			.num{
				width: 100rpx;
				line-height: 48rpx;
				background: #f6f6f6;
				border-radius: 4rpx;
				text-align: center;
				margin-right: 30rpx;
				color: #999999;
				font-size: 24rpx;
			}
			.active{
				background: linear-gradient(140deg,#f2e4a2 0%, #d1b87d);
				background-image: url('//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg10.png');
				background-repeat: no-repeat;
				background-size: cover;
				color: #007664;
			}
		}
	}
	.btB{
		// border-top: 1rpx solid rgba(142,142,142,.24);
	}
	.common{
		height: 96rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// border-bottom: 1rpx solid rgba(142,142,142,.24);
		.price{
			color: #333333;
			font-size: 24rpx;
		}
		.left{
			color: #333333;
			font-size: 24rpx;
			display: flex;
			width: 100%;
			.tit{
				margin-right: 29rpx;
				font-size: 26rpx;
			}
			.grey{
				color: #999999;
			}
			.tic{
				flex: 1;
				// border: 1rpx solid;
				text-align: right;
				margin-right: 20rpx;
			}
		}
	}
}

.technicianWrap{
	.title{
		padding: 43rpx 0 30rpx 32rpx;
		color: #666666;
		font-size: 26rpx;
	}
	.groupList{
		background: #ffffff;
		border-radius: 8rpx;
		padding: 0 32rpx;
		.list{
			height: 94rpx;
			border-bottom: 1rpx solid rgba(142,142,142,.24);
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333333;
			font-size: 26rpx;
		}
		.list:last-child{
			border-bottom: 1rpx solid #FFFFFF;
		}
	}
}

</style>
